// component/echarts1/index.ts
import * as echarts from '../../ec-canvas/echarts'
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: []
    }
  },
  observers: {
    "data": function (newVal) {
      // console.log(newVal)
      this.setData({
        list: newVal,
        ec: {
          onInit: function (canvas, width, height, dpr) {
            const initChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            initChart.setOption({
              title: {
                text: '供回水压力',
                left: 0,
                top: 0
              },
              tooltip: {
                trigger: 'axis',
                formatter: (params)=> {
                  let html =
                  params[0].name == 0
                      ? params[0].name + "0:00" + "\n"
                      : params[0].name + ":00" + "\n";
                  for (let i = 0; i < params.length; i++) {
                    html +=
                      params[i].marker +
                      params[i].seriesName +
                      ":" +
                      (params[i].value?params[i].value:'0') +
                      "MPa" +
                      "\n";
                  }
                  return html;
                }
                // axisPointer: {
                //   type: 'cross',
                //   label: {
                //     backgroundColor: '#6a7985',
                //   },
                // },
              },
              legend: {
                data: ['一次供压', '一次回压', '二次供压', '二次回压'],
                top: 30
              },
              color: [],
              grid: {
                height: '180',
                top: 100,
                left:'5%',
              containLabel: true
              },
              color: ['#FF6B6B', '#5194F8', '#FFC001', '#22DC9B'],
              xAxis: {
                data:newVal[0]??[],
                // axisPointer: {
                //   type: 'shadow' // 滚动条样式
                // },
                // // boundaryGap: true, // 坐标轴两端是否留白
                // axisLabel: {
                //   interval:5, // 强制显示所有标签
                // }
              },
              // dataZoom: {
              //   type: 'slider', // 滑块样式
              //   start: 0, // 默认起始位置
              //   end: 60, // 默认结束位置
              // },
              yAxis: {
                name: 'MPa',
                position: 'left',
              },
              series: [
                {
                  type: 'line',
                  name: '一次供压',
                  data: newVal[1],
                },
                {
                  type: 'line',
                  name: '一次回压',
                  data: newVal[2],
                },
                {
                  type: 'line',
                  name: '二次供压',
                  data: newVal[3],
                },
                {
                  type: 'line',
                  name: '二次回压',
                  data: newVal[4],
                },
              ],
            })
            canvas.setChart(initChart);
            return initChart;
          }
        }
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    chart: null,
    list: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init(X, series1, series2, series3, series4) {
      this.lazyComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRation: dpr
        })
        let option = this.getOption(X, series1, series2, series3, series4)  // echarts的配置信息
        chart.setOption(option)
        this.chart = chart //将图表实例绑定到this上，方便其他函数访问
        return chart
      })

    },
    getOption(X, series1, series2, series3, series4) {
      return {
        title: {
          text: '供回水温度',
          left: 0,
          top: 0
        },
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985',
          //   },
          // },
        },
        legend: {
          data: ['一次供温', '一次回温', '二次供温', '二次回温'],
          top: 30
        },
        color: [],
        grid: {
          height: '120',
          top: 80
        },
        color: ['#FF6B6B', '#5194F8', '#FFC001', '#22DC9B'],
        xAxis: {
          data: X,
          axisPointer: {
            type: 'shadow' // 滚动条样式
          },
          boundaryGap: true, // 坐标轴两端是否留白
          axisLabel: {
            interval: 0, // 强制显示所有标签
          }
        },
        // dataZoom: {
        //   type: 'slider', // 滑块样式
        //   start: 0, // 默认起始位置
        //   end: 60, // 默认结束位置
        // },
        yAxis: {
          name: '°C',
          position: 'left',
        },
        series: [
          {
            type: 'line',
            name: '一次供温',
            data: series1,
          },
          {
            type: 'line',
            name: '一次回温',
            data: series2,
          },
          {
            type: 'line',
            name: '二次供温',
            data: series3,
          },
          {
            type: 'line',
            name: '二次回温',
            data: series4,
          },
        ],
      }
    }
  },
  //小程序声明周期
  lifetimes: {
    attached: async function () {
      // 在组件实例进入页面节点树时执行
      let that = this;
      that.lazyComponent = await that.selectComponent('#line-chart');
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  pageLifetimes: {
    show: function () {
      // const { list } = this.data
      // // 页面被展示
      // setTimeout(() => {
      //   this.init(list[0], list[1], list[2], list[3], list[4])
      // }, 2000)
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  }
})